<template>
    <el-drawer :title="$t('game.user.drawer.details')" size="400px" :visible.sync="drawerVisible" @close="$emit('update:visible', false)">
        <vue-simplebar>
            <div class="pt-12 pb-12 pr-3" v-if="data.id">
                <el-form label-width="120px" class="detail">
                    <el-form-item label="UID">{{ data.id }}</el-form-item>
                    <el-form-item :label="$t('platform.setting.tree.org')">{{ data.org.name || data.plat_code }}</el-form-item>
                    <el-form-item label="line_code">{{ data.line_code }}</el-form-item>
                    <el-form-item :label="$t('game.user.account_id')">{{ data.account_id }}</el-form-item>
                    <!--<el-form-item :label="$t('game.user.open_id')">{{ data.open_id }}</el-form-item>
                    <el-form-item :label="$t('game.user.nickname')">{{ data.nickname }}</el-form-item>
                    <el-form-item :label="$t('game.user.sex')">
                        <el-tag effect="plain" size="mini" :type="{0:'info',1:'',2:'danger'}[data.sex]">
                            {{ $t('game.user.sexList')[data.sex].label }}
                        </el-tag>
                    </el-form-item>-->
                    <el-form-item :label="$t('game.user.gold')">
                        <div v-if="data.wallet != null && data.wallet.balances != null">
                            <el-tag effect="plain" size="mini" type="info" class="mr-1"
                                    v-for="(number,currency) in data.wallet.balances" :key="currency">
                                {{ currency }}
                                <component-page-numeral :num="number"></component-page-numeral>
                            </el-tag>
                        </div>
                    </el-form-item>
                    <el-form-item :label="$t('game.user.auth_type')">
                        <el-tag effect="plain" size="mini" type="info">
                            {{ $t(`game.user.authList.${data.auth_type}`).label || data.auth_type }}
                        </el-tag>
                    </el-form-item>
                    <el-form-item :label="$t('game.user.role')">
                        <span v-for="bit in data.role" class="mr-1">
                            <el-tag effect="plain" size="mini" :type="{1:'info',2:'warning'}[bit] || 'info'">
                                {{ $t(`game.user.roleList.${bit}`).label || bit }}
                            </el-tag>
                        </span>
                    </el-form-item>
                    <el-form-item :label="$t('game.user.access')">
                        <span v-for="bit in data.access" class="mr-1">
                            <el-tag effect="plain" size="mini" :type="bit == 1 ? 'info' : 'warning'">
                                {{ $t(`game.user.accessList.${bit}`).label || bit }}
                            </el-tag>
                        </span>
                    </el-form-item>
                    <el-form-item :label="$t('game.user.player_slo')" v-if="isSuperAdmin">
                        <div class="flex flex-wrap pr-5">
                            <div class="mr-auto ml-0">
                                <component-page-model-view :model-id="data.player_slo.slo_model_id" ></component-page-model-view>
                            </div>
                            <el-button class="p-0" type="text" @click="dialog.visible.updateModel = true">{{ $t('action.edit') }}</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item :label="$t('game.user.player_fish')" v-if="isSuperAdmin">
                        <div class="flex flex-wrap pr-5">
                            <div class="mr-auto ml-0">
                                <component-page-ratio-view :ratio="data.player_fish.fish_model_id" ></component-page-ratio-view>
                            </div>
                            <el-button class="p-0" type="text" @click="dialog.visible.updateRatio = true">{{ $t('action.edit') }}</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item :label="$t('game.user.device_type')">
                        <el-tag effect="plain" size="mini" type="info">{{ $t('game.user.deviceList')[data.device_type].label }}</el-tag>
                    </el-form-item>
                    <el-form-item :label="$t('game.user.device_id')">{{ data.device_id }}</el-form-item>
                    <el-form-item :label="$t('game.user.country')">{{ data.country }}</el-form-item>
                    <el-form-item :label="$t('game.user.city')">{{ data.city }}</el-form-item>
                    <el-form-item :label="$t('game.user.language')">{{ data.language }}</el-form-item>
                    <el-form-item :label="$t('game.user.registration_time')">
                        <component-page-timestamp :timestamp="data.registration_time"></component-page-timestamp>
                    </el-form-item>
                    <el-form-item :label="$t('game.user.registration_ip')">{{ data.registration_ip }}</el-form-item>
                    <el-form-item :label="$t('game.user.last_login_ip')">{{ data.last_login_ip }}</el-form-item>
                    <el-form-item :label="$t('game.user.last_login_time')">
                        <component-page-timestamp :timestamp="data.last_login_time"></component-page-timestamp>
                    </el-form-item>
                    <el-form-item :label="$t('game.user.last_game_time')">
                        <div v-if="data.player.last_game_time == null || data.player.last_game_time == 0">----</div>
                        <component-page-timestamp :timestamp="data.player.last_game_time" v-else></component-page-timestamp>
                    </el-form-item>
                    <el-form-item :label="$t('game.user.last_game_id')">
                        <div v-if="data.player.last_game_id == null || data.player.last_game_id == '-'">----</div>
                        <div v-else>{{ data.player.last_game_id }}</div>
                    </el-form-item>
                    <el-form-item :label="$t('game.user.first_game_time')">
                        <div v-if="data.first_game_time == null || data.first_game_time == 0">----</div>
                        <component-page-timestamp :timestamp="data.first_game_time" v-else></component-page-timestamp>
                    </el-form-item>
                </el-form>
            </div>
        </vue-simplebar>
        <item-update-model :visible.sync="dialog.visible.updateModel" :data="data"></item-update-model>
        <item-update-ratio :visible.sync="dialog.visible.updateRatio" :data="data"></item-update-ratio>
    </el-drawer>
</template>

<script>
import ItemUpdateModel from './ItemUpdateModel.vue'
import ItemUpdateRatio from "./ItemUpdateRatio.vue";

export default {
    components: {
        ItemUpdateRatio,
        ItemUpdateModel,
    },
    name: "ItemDetails",
    props: ['visible', 'data'],
    data() {
        return {
            drawerVisible: false,
            dialog: {
                visible: {
                    updateModel: false,
                    updateRatio: false,
                }
            },
        }
    },
    computed: {
        isSuperAdmin() {
            return this.$store.state.admin.user.isSuperAdmin;
        }
    },
    watch: {
        visible: function (n, o) {
            if (n) {
                // 显示抽屉
                this.drawerVisible = n;
            }
        }
    },
}
</script>

<style scoped>

</style>
